<template>
  <div class="header-bar">
    <div class="title">
      <span class="title-text">Web-DBM</span>
    </div>
    <div class="links">
      <el-link size="small" @click="loginVisible = true">
        <el-icon>
          <user />
        </el-icon>
        <span>登录</span>
      </el-link>
      <el-divider direction="vertical"></el-divider>
      <!--      <el-link size="small" @click="optionVisible = true">-->
      <!--        <el-icon>-->
      <!--          <tools />-->
      <!--        </el-icon>-->
      <!--        <span>选项</span>-->
      <!--      </el-link>-->
      <el-link size="small" @click="helpVisible = true">
        <el-icon>
          <question-filled />
        </el-icon>
        <span>帮助</span>
      </el-link>
    </div>
    <el-dialog title="用户" v-model="loginVisible" width="400">
      <el-form label-width="80">
        <el-form-item label="用户名">
          <el-input v-model="loginInfo.user"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginInfo.password" type="password" show-password></el-input>
        </el-form-item>
      </el-form>
      <p>若用户不存在，会自动创建。</p>
      <template #footer>
        <el-button type="primary">登录</el-button>
      </template>
    </el-dialog>
    <el-dialog append-to-body v-model="helpVisible">
      <template #header>
        <div class="help-title">
          <el-icon>
            <question-filled />
          </el-icon>
          <span>帮助</span>
        </div>
      </template>
      <help-panel />
    </el-dialog>
    <el-dialog append-to-body v-model="optionVisible">
      <template #header>
        <div class="help-title">
          <el-icon>
            <tools />
          </el-icon>
          <span>选项</span>
        </div>
      </template>
      <option-panel />
    </el-dialog>
  </div>
</template>
<script setup>
import HelpPanel from '@/components/HelpPanel.vue'
import OptionPanel from '@/components/OptionPanel.vue'
import { QuestionFilled, Tools, User } from '@element-plus/icons-vue'
</script>

<script>
export default {
  name: 'HeaderBar',
  data() {
    return {
      helpVisible: false,
      optionVisible: false,
      loginInfo: {
        user: null,
        password: null
      },
      loginVisible: false
    }
  }
}
</script>

<style scoped>
.title {
  float: left;
  padding: 10px 0;
}

.title-text {
  font-size: 1.5em;
}

.db-type {
  margin-left: 10px;
  font-size: 12px;
  background-color: #eeeeee;
  color: #888888;
  padding: 2px 3px;
  border-radius: 2px;
  vertical-align: 2px;
}

.links {
  float: right;
  display: flex;
  gap: 10px;
}
</style>
